<template>
	<ul>
		<!-- 第一行：全选框 -->
		<li>
			<div>
				<input type="checkbox" v-model="isAllChecked"/>
				<span>全选</span>
			</div>
		</li>
		<!-- 数据样例行 -->
		<li v-for="(item, index) in dataList" :key="index">
			<input type="checkbox" v-model="checkList" 
			:value="item"/>
			<img v-bind:src="item.img"/>
			<div>
				<p>{{ item.title }}</p>
				<p>单价：{{ item.price }}</p>
			</div>
			<div>
				<!-- :disabled="true"表示禁用，相当于添加了disabled属性 -->
				<!-- :disabled="false"表示启用，相当于移除了disabled属性 -->
				<button @click="item.number --" 
				:disabled="item.number <= 1">-</button>
				{{ item.number }}
				<button @click="item.number ++"
				:disabled="item.number >= item.maxNumber">+</button>
			</div>
			<button @click="handelDel(index, item.id)">删除</button>
		</li>
		<!-- 没有商品时显示的提示 -->
		<li v-if="dataList.length < 1">
			购物车中还没有商品~
		</li>
		<li>
			总金额：{{ sum }}
		</li>
	</ul>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
const dataList = reactive([
    {
        id: 1,  // 主键
        title: '商品1',  // 商品名称
        price: 10,  // 单价
        number: 1,  // 当前的数量
        img: 'https://img.alicdn.com/imgextra/i1/2214139834336/O1CN01YARYay1htwDZFHmWO_!!2214139834336-0-alimamacc.jpg_580x580q90.jpg_.webp',
        maxNumber: 5  // 限制的购买数量
    },
    {
        id: 2,
        title: '商品2',
        price: 20,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i2/3292659455/O1CN01We5hHQ2JiRjkEwrpv_!!0-saturn_solar.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    },
    {
        id: 3,
        title: '商品3',
        price: 10,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i4/96565893/O1CN01wFsazE1tP2qwzYlPM_!!0-saturn_solar.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    }
])
// 绑定给所有商品的复选框，用于存放勾选的商品对象
const checkList = ref([])
// 计算总价
const sum = computed(() => {
	// let total = 0
	// checkList.value.forEach(item => total += (item.price * item.number))
	// return total
	// 等同于
	return checkList.value
		.reduce((total, item) => total += (item.price * item.number), 0)
})
// 处理删除：从dataList中删除商品对象，从checkList删除商品
const handelDel = (index, id) => {
	// console.log('删除索引：' + index)  // 2，在dataList中的索引
	// console.log('删除id：' + id) // 3
	// 从dataList中删除商品对象
	dataList.splice(index, 1)
	// 从checkList删除商品
	// checkList.value.splice(index, 1)
	// 使用过滤来删除，满足条件的对象进入新数组，id为1和2的对象
	checkList.value = checkList.value.filter(item => item.id != id) 
}
// 计算全选框状态
const isAllChecked = computed({
	// 计算的过程
	get() {
		// 根据2个数组的数量对比来计算
		// 2个数组数量一致的时候，认为是全选，排除数量都是0的情况
		return dataList.length !==0 
				&& dataList.length === checkList.value.length
	},
	// 预修改
	set(value) {
		// console.log('当前：' + isAllChecked.value)
		// console.log('正在修改' + value)
		// console.log('用户正在' + (value ? '打勾' : '去除'))
		// 根据用户的意图去修改checkList
		if(value) {
			// 全选，下面所有商品都勾选，全部商品加到checkList中
			checkList.value = dataList
		} else {
			// 反选，下面所有商品都取消勾选，checkList中所有商品清空
			checkList.value = []
		}
	}
})
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
/* 对所有的li元素构建弹性布局，使其中的子元素灵活排布 */
ul li {
	display: flex;
	/* 水平方向（当前的主轴）的对齐方式：平均分散 */
	justify-content: space-between;
	/* 垂直方向（当前的交叉轴）的对齐方式：居中 */
	align-items: center;
	border: 1px solid #ccc;
	padding: 10px;
}
ul li img {
	width: 80px;
}
</style>